<template>
  <mt-popup v-model="visible" position="bottom" style="width:100%;">
    <div class="share-body">
      <p class="share-title">分享到</p>
      <div class="share-icon-list">
        <div class="share-item">
          <img class="share-icon" src="../../assets/imgs/icon/weixin.png"/>
          <span class="share-name">微信</span>
        </div>
        <div class="share-item">
          <img class="share-icon" src="../../assets/imgs/icon/webo.png"/>
          <span class="share-name">微博</span>
        </div>
        <div class="share-item">
          <img class="share-icon" src="../../assets/imgs/icon/pengyouquan.png"/>
          <span class="share-name">朋友圈</span>
        </div>
        <div class="share-item">
          <img class="share-icon" src="../../assets/imgs/icon/QQhaoyou.png"/>
          <span class="share-name">QQ</span>
        </div>
      </div>
    </div>
    <div class="share-cancel" @click="visible=false">
      <span>取消</span>
    </div>
  </mt-popup>
</template>

<script>
  /**
   * qq,微信，微博 分享
   */
  export default {
    name: 'share',
    props: {
      shareVisible: Boolean
    },
    data() {
      return {
        visible: this.shareVisible
      }
    },
    watch: {
      visible(val) {
        this.$emit('update:shareVisible', val);
      },
      shareVisible(val) {
        this.visible = val;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .share-body {
    border-top: 1px solid #79C7FE;
    padding: .24rem .24rem 0;
    .share-title {
      font-size: .28rem;
    }
    .share-icon-list {
      display: flex;
      .share-item {
        transition: all .2s;
        padding: .10rem .20rem;
        flex: 1;
        text-align: center;
        margin: .60rem 0 .38rem;
        &:active {
          background-color: #E5E5E5;
        }
        .share-icon {
          height: .62rem;
        }
        .share-name {
          margin-top: .45rem;
          display: block;
        }
      }
    }
  }

  .share-cancel {
    transition: all .2s;
    position: relative;
    padding: .32rem 0;
    text-align: center;
    font-size: .30rem;
    &:active {
      background-color: #E5E5E5;
    }
    &:before {
      transform: scaleY(.5);
      height: 1px;
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      border-top: 1px solid #CFCFCF;
    }
  }
</style>
